<template>
	<view class="main">
		<!-- <view class="price">
            <view>
                <view style="margin-bottom: 20rpx;">账户余额</view>
                <view class="num">{{ deposit_total }}</view>
            </view>
            <view class="btn" @click="$u.route('pages/mine/wallets/withdrawal')">提现</view>
        </view> -->

		<h3 style="margin-bottom: 30rpx;">{{ $t('钱包流水') }}</h3>

		<view class="list">
			<u-empty margin-top="30" :text="$t('列表为空')" v-if="list.length === 0" mode="list"></u-empty>
			<view class="item" v-for="item in list" :key="item.id">
				<view>
					<view class="title">{{ $t(item.info) }}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="num">{{ item.num }}</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			deposit_total: '',
			list: []
		};
	},
	onLoad() {
		this.getList();
	},

	methods: {
		getList() {
			this.$u.api.wallet_info().then(res => {
				this.deposit_total = res.data.deposit_total;
				this.list = res.data.data;
			});
		}
	}
};
</script>
<style scoped lang="scss">
.main {
	padding: 20rpx;
}

.price {
	margin-bottom: 30rpx;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-radius: 16rpx;
	background-color: #0089ff;
	font-size: 30rpx;

	.num {
		font-size: 40rpx;
	}

	.btn {
		background-color: #fff;
		color: #0089ff;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: 2rpx solid #ffffff;
	}
}

.list {
	border-radius: 16rpx;
	padding: 20rpx;
	background-color: #fff;

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: solid 2rpx #e7e7e7;

		.title {
			margin-bottom: 10rpx;
			font-size: 32rpx;
		}

		.time {
			color: #999;
		}

		.num {
			font-size: 34rpx;
			font-weight: 500;
		}
	}
}
</style>
<style lang="scss">
page {
	background: #f8f8f8;
}
</style>
